<template>
  <div style="display: flex;" class="container">
    <div style="width:70%;margin-right: 20px">
      <videoView :url="videoUrl"></videoView>
      <div style="margin-top: 20px;">
        <comment :imgsrc="avatarUrl" :userName="username" :discuss="discuss" :time="publishTime"></comment>
      </div>
    </div>
    <div style="width:25%;cursor: pointer">
      <h3>相关推荐</h3>
      <imagefill v-for="(item,index) in interrelatedArr" :key="index" :url="item.coverUrl" :title="item.title"
                 :description="item.creator[0].userName" @click="proceed(item)"></imagefill>
    </div>
  </div>
  <div style="width:70%;margin-right: 20px;text-align: right">
    <p>评论</p>
    <a-textarea placeholder="小小善意能够改变世界" allow-clear v-model="commentTextarea"/>
    <a-button type="primary" @click="submitComments">提交评论</a-button>

  </div>
  <div style="text-align: center" v-if="loading">
    <a-spin/>
  </div>
  <div style="margin-top: 20px;">
    <a-comment
        :author="item.user.nickname"
        :content="item.content"
        :datetime="item.timeStr"
        v-for="(item,index) in commentList" :key="index"
    >
      <template #actions>
      <span class="action" key="heart" @click="onLikeChange">
        <span v-if="like">
          <IconHeartFill :style="{ color: '#f53f3f' }"/>
        </span>
        <span v-else>
          <IconHeart/>
        </span>
        {{ item.likedCount }}
      </span>
        <span class="action" key="star" @click="onStarChange">
        <span v-if="star">
          <IconStarFill style="{ color: '#ffb400' }"/>
        </span>
        <span v-else>
          <IconStar/>
        </span>
      </span>
        <span class="action" key="reply">
        <IconMessage/> Reply
      </span>
      </template>
      <a-comment
          :author="x.user.nickname"
          :avatar="x.user.avatarUrl"
          :content="x.content"
          v-for="(x,y) in item.beReplied"
          :key="y"
      >
        <template #actions>
          <span class="action"> <IconMessage/> Reply </span>
        </template>
      </a-comment>
      <template #avatar>
        <a-avatar>
          <img
              alt="avatar"
              :src="item.user.avatarUrl"
          />
        </a-avatar>
      </template>
    </a-comment>
  </div>
  <div style="height: 200px;"></div>
</template>

<script setup>
import videoView from "~/pages/mvList/components/video.vue"
import comment from "~/pages/mvList/components/comment.vue"
import imagefill from "~/pages/mvList/components/recommend.vue"
import {
  SetvideoDetailsApi,
  getvideoPlaybackApi,
  SetrelatedVideosApi,
  SetvideoReviewApi,
  SetpublicationApi,
  SetgetMVPlaybackApi,
  SetSetmvReviewApi,
  SetmvDetailsApi
} from "~/commonApi/api"
import {ref, watch} from "vue"
import {useRoute, useRouter} from "vue-router";
import {toast} from "~/uilti/tool.js";

const route = useRoute()
const router = useRouter()
const id = ref('')
const type = ref('')
const videoUrl = ref('')
const discuss = ref('')
const avatarUrl = ref('')
const publishTime = ref('')
const username = ref('')
const userId = ref('')
const commentList = ref([])
const like = ref(false);
const star = ref(false);
id.value = route.query.vid
type.value = route.query.type
const getdata = async (id) => {
  if (type.value == 'mv') {
    const res = await SetmvDetailsApi(id)
    const resqlt = await SetgetMVPlaybackApi(id)
    videoUrl.value = resqlt.data.url
    const response = await SetSetmvReviewApi(id)
    commentList.value = response.comments
    await interrelated()
    username.value = res.data.artistName
    discuss.value = res.data.name
    userId.value = res.data.userId
    avatarUrl.value = res.data.artists[0].img1v1Url
    publishTime.value = String(res.data.publishTime)
  } else {
    const resqlt = await getvideoPlaybackApi(id)
    const res = await SetvideoDetailsApi(id)
    const response = await SetvideoReviewApi(id)
    commentList.value = response.comments
    await interrelated()
    videoUrl.value = resqlt.urls[0].url
    username.value = res.data.nickname
    discuss.value = res.data.title
    userId.value = res.data.userId
    avatarUrl.value = res.data.avatarUrl
    publishTime.value = String(res.data.publishTime)
  }


}

getdata(id.value)
const interrelatedArr = ref([])
const interrelated = async () => {
  const res = await SetrelatedVideosApi(id.value)
  interrelatedArr.value = res.data

}
const proceed = (item) => {
  const query = JSON.parse(JSON.stringify(route.query))
  query.vid = item.vid;//state 修改的参数
  router.push({path: '/polytechnic', query})
}
const commentTextarea = ref('')
const loading = ref(false)
const submitComments = async () => {
  if (!commentTextarea.value) return toast('请填写评论后点击提交', 'error')
  loading.value = true
  const res = await SetpublicationApi({
    id: id.value,
    t: 1,
    type: 5,
    content: commentTextarea.value,
  })
  loading.value = false
  if (res.code == 200) {
    commentTextarea.value = ''
    getdata(id.value)
  }
}
const onLikeChange = () => {
  like.value = !like.value;
};
const onStarChange = () => {
  star.value = !star.value;
};
</script>

<style scoped>
.container {
  /*height: 100vh;*/
}
</style>